<template>
  <el-table :data="verificationCodes" border style="width: 100%">
    <el-table-column prop="code" label="验证码"></el-table-column>
    <el-table-column prop="type" label="类型">
      <template slot-scope="{ row }">
        {{ typeMap[row.type] }}
      </template>
    </el-table-column>
    <el-table-column prop="expireAt" label="过期时间"></el-table-column>
    <el-table-column prop="createdAt" label="创建时间"></el-table-column>
    <el-table-column prop="userName" label="使用此验证码的用户"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="{ row }">
        <el-button size="mini" type="danger" @click="deleteCode(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'VerificationCodeList',
  props: {
    verificationCodes: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      typeMap: {
        ACTIVATION: '用户激活码',
        SUBMIT_ORDER: '普通订单验证码',
        SUPER_SUBMIT_ORDER: '高级订单验证码'
      }
    };
  },
  methods: {
    deleteCode(id) {
      this.$emit('delete', id);
    }
  }
};
</script>